<template>
  <!-- Home -->
  <f7-page class="zx_tabs">
    <f7-navbar no-hairline no-shadow>
      <f7-nav-left>
        <f7-link icon-f7="line_horizontal_3" panel-open="left"></f7-link>
      </f7-nav-left>
      <f7-nav-title>首页</f7-nav-title>
      <f7-nav-right>
        <f7-link icon-f7="search"></f7-link>
      </f7-nav-right>
    </f7-navbar>
    <f7-list no-hairlines class="no-margin-top">
      <f7-list-item @click="routeView('/actionsheet/')" title="ActionSheet" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/button/')" title="Buttons" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/badge/')" title="Badge" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/block/')" title="Block" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/card/')" title="Card" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/checkbox/')" title="Checkbox" link="#"></f7-list-item>
      <f7-list-item @click="routeView('/dialog/')" title="Dialog" link="#"></f7-list-item>
      <!-- <f7-list-item title="打开Loading(不含对话框)" link="#"></f7-list-item>
      <f7-list-item title="打开Toast" link="#"></f7-list-item> -->
    </f7-list>
  </f7-page>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    routeView(url) {
      this.$f7router.navigate(url);
    },
  }
}
</script>